<template>
  <div ref="containerRef" class="common-page detail">
    <title-view title="在册信息" icon="item-register"></title-view>
    <div class="common-item-view">
      <t-row :gutter="[0, 16]">
        <t-col v-for="(item, index) in list" :key="index" :span="index % 2 === 0 ? 4 : 8">
          <div class="item">
            <div class="label" style="width: 120px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <title-view title="视频流信息" icon="item-info"></title-view>
    <div class="common-item-view">
      <t-row :gutter="[0, 30]">
        <t-col v-for="(item, index) in videoList" :key="index" :span="index % 2 === 0 ? 4 : 8">
          <div class="item">
            <div class="label" style="width: 120px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <title-view title="输出协议" icon="item-snap"></title-view>
    <div v-for="(item, index) in outputList" :key="index" class="common-item-view" style="margin-bottom: 10px">
      <t-row :gutter="[0, 30]">
        <t-col :span="4">
          <div class="item">
            <div class="label" style="width: 120px; display: flex; align-items: center">
              <span style="margin-right: 4px">{{ item.deviceName }}</span>
              <svg-icon class="icon" name="item-questionMark"></svg-icon>
            </div>
            <div class="value output-value-box">
              <div class="output-value" style="margin-right: 18px">
                <svg-icon v-if="item.status === 1" class="icon" name="item-close"></svg-icon>
                <svg-icon v-else class="icon" name="item-open"></svg-icon>
                <span>{{ OPEN_CLOSE_NAME[item.status] }}</span>
              </div>
              <div v-if="item.connect === 2" class="output-value">
                <svg-icon class="icon" name="item-open"></svg-icon>
                <span>已连接</span>
              </div>
            </div>
          </div>
        </t-col>
        <t-col v-if="item.status === 2 && item.connect === 2" :span="8">
          <div class="item">
            <div class="label" style="width: 120px">视频传输设备ID</div>
            <div class="value">{{ item.deviceId }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="bottom-btn">
      <t-button theme="primary">设备连接测试</t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// import dayjs from 'dayjs';
import _ from 'lodash';
import { tryit } from 'radash';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import mockApi from '@/api/mock';
import { ResultItem } from '@/api/model/mockModel';
import { SUCCESS_CODE } from '@/constants';
import { EQUIPMENT_TYPE_NAME, OPEN_CLOSE_NAME, VIDEOTYPE_NAME } from '@/constants/data';
import { useLoading } from '@/hooks/useLoading';
import { setKvViewData } from '@/utils';

import { INIT_FORM_LIST, INIT_FORM_VIDEO_LIST } from './datas/detail';

const route = useRoute();

const containerRef = ref<HTMLDivElement>();
const dataInfo: any = ref({});
const list = ref(_.cloneDeep(INIT_FORM_LIST));
const videoList = ref(_.cloneDeep(INIT_FORM_VIDEO_LIST));
const outputList: any = ref([]);

const { loadingStart, loadingEnd } = useLoading(containerRef);

// 设置数据
const setData = (data: ResultItem) => {
  data.equipment.type = EQUIPMENT_TYPE_NAME[dataInfo.value.equipment.type];
  list.value = setKvViewData(list.value, { ...data.equipment });
  data.video.type = VIDEOTYPE_NAME[dataInfo.value.video.type];
  videoList.value = setKvViewData(videoList.value, { ...data.video });
  outputList.value = [...data.output];
};

const getData = async () => {
  loadingStart();
  const id = route.query.id as string;
  const [err, res] = await tryit(mockApi.info)({ id });
  console.log(';;;;;;;;;;;;;', res.data);
  if (!err && res.code === SUCCESS_CODE) {
    dataInfo.value = res.data;
    setData(res.data);
  }
  loadingEnd();
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.output-value-box {
  display: flex;
  align-items: center;

  .output-value {
    display: flex;
    align-items: center;

    span {
      margin-left: 4px;
      color: #9e9e9e;
    }
  }
}

.bottom-btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
